<!--  -->
<template>
  <div class="">
    <h1>首页----{{ $store.state.name }}</h1>
    <h1>{{ $store.state.user.name }}</h1>
    <h1 v-for="(u, index) in $store.state.userList" :key="index">
      {{ u.name }}----{{ u.age }}
    </h1>
    <button @click="updateName">修改用户名</button>
    <button @click="updateUser">修改用户</button>
    <button @click="addUser">添加用户到集合中</button>
    <span> 学生年龄总和：{{ $store.getters.getAllAges }} </span>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //方法集合
  methods: {
    updateName() {
      this.$store.commit("updateName", "CC");
    },
    updateUser() {
      this.$store.commit("updateUser", {
        name: "CJ",
        age: 18,
      });
    },
    addUser() {
      this.$store.commit("addUser", {
        name: "CC",
        age: 18,
      });
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
</style>
